<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>flex-grow</title>
    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .box {
            width: 600px;
            height: 300px;
            margin: 100px auto 0;
            background: lightblue;
            /* flex布局 */
            display: flex;
        }

        .item {
            background: blue;
            /* flex: 1; */
            /* 所有项目的flex-grow属性都为1，则它们将等分剩余空间，剩余空间的含义是，去掉固有的内容之外的空间 */
            /* 如果本身内容就多，比如这里的第二个项目，虽然均分，但是还是会相比内容少的项目占据比较大的空间*/
            /* flex-grow: 0; */
        }

        .item:first-child {
            height: 50px;
            flex-grow: 3;
        }

        .item:nth-child(2) {
            height: 70px;
            flex-grow: 1;
        }

        .item:nth-child(3) {
            height: 30px;
            /*如果这里想把第三个项目的flex-grow属性设为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。*/
            /*flex-grow: 2;*/
        }

        .item:last-child {
            height: 50px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="item">第一项</div>
        <div class="item">第二项：文字比较多</div>
        <div class="item">第三项</div>
        <div class="item">第四项</div>
    </div>
</body>

</html>